<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside style="width:200px; overflow:hidden ">
          <el-menu router>
          <el-submenu index="1" v-for="(item,index) in this.$router.options.routes"
          :key="index">
            <template slot="title">
              <i class="el-icon-phone-outline " style="color: cyan ;margin: 5px"></i>
              <span style="font-family: 楷体 color：white">
                {{item.name}}
              </span>
            </template>
              <el-menu-item :index="children.path"
                            v-for="(children,indexj) in item.children " style="font-family: 楷体 color：white">
                <i class="el-icon-share" style="color: cyan ;margin: 5px"></i>
                {{children.name}}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'HomeView',

}

</script>
<style >
  .el-menu {
    background-color: #182450;
    height: 100vh;
  }
  .el-main {
    background: #242E66;
  }
  .title{
    font-color:white
  }
  .el-submenu__title {
    color:white;
  }
  .el-menu-item {
    color: white;
  }
</style>